<template>
    <div class="container">
        <a-modal v-model:visible="visible" title="添加用户" footer="" @ok="handleOk" resetFields>
            <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout"
                @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
                <a-form-item has-feedback label="账号" name="username">
                    <a-input v-model:value="formState.username" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="姓名" name="user_name">
                    <a-input v-model:value="formState.user_name" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="密码" name="password">
                    <a-input v-model:value="formState.password" type="text" autocomplete="off" />
                </a-form-item>
                <!-- <a-form-item has-feedback label="角色" name="role">
                    <a-input v-model:value="formState.role" type="text" autocomplete="off" />
                </a-form-item> -->
                <a-form-item has-feedback label="邮箱">
                    <a-input v-model:value="formState.email" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="手机号" name="mobile">
                    <a-input v-model:value="formState.mobile" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">添加</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: "userEdit",
};
</script>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { addUser, getUserInfo } from '@api/user.js'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue';
const emit = defineEmits(['add'])
const visible = ref(false)
const handleOk = () => {
    visible.value = false;
};

const router = useRouter();
const route = useRoute();
const formRef = ref()
const formState = reactive({
    username: '',
    user_name: '',
    password: '',
    email: '',
    mobile: '',
    role: '',
});
defineExpose({
    handleOk,
    visible,
    formState
})
let validate = async (_rule, value) => {
    if (value === '') {
        return Promise.reject('必填项');
    }
};
// 非空验证
const rules = {
    username: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    password: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    user_name: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    // role: [
    //     {
    //         required: true,
    //         validator: validate,
    //         trigger: 'change',
    //     }
    // ],
    mobile: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    email: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
};
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 14,
    },
};
const handleFinish = values => {
    console.log(formState, '***********');
    addUser({ username: formState.username, user_name: formState.user_name, password: formState.password, email: formState.email, mobile: formState.mobile, role: formState.role })
        .then(res => {
            message.success('添加成功');
            visible.value = false
            emit('add')
        })
        .catch(err => {
            console.log(err.response.data.hasOwnProperty('email'))
            console.log(err)
            if (err.response.data.hasOwnProperty('username')) {
                message.error('账户名已存在')
            } else if (err.response.data.hasOwnProperty('email')) {
                message.error('邮箱格式不正确')
            } else if (err.response.data.hasOwnProperty('mobile')) {
                message.error('手机格式不正确')
            }
        })
};
const handleFinishFailed = errors => {
    console.log(errors, '---------');
};
</script>

<style lang="less" scoped>
.container {
    height: calc(100vh - 85px);
    padding: 20px;

    ::v-deep .ant-card-body {
        position: absolute;
        width: 1000px;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
::v-deep .ant-form-item-children-icon{
    display: none;
}
</style>